<template>
	<view class="u-swipe-action-item" ref="u-swipe-action-item">
		<view class="u-swipe-action-item__right">
			<slot name="button">
				<view v-for="(item,index) in options" :key="index" class="u-swipe-action-item__right__button"
					:ref="`u-swipe-action-item__right__button-${index}`" :style="[{
						alignItems: item.style && item.style.borderRadius ? 'center' : 'stretch'
					}]" @tap="buttonClickHandler(item, index)">
					<view class="u-swipe-action-item__right__button__wrapper" :style="[{
							backgroundColor: item.style && item.style.backgroundColor ? item.style.backgroundColor : '#C7C6CD',
							borderRadius: item.style && item.style.borderRadius ? item.style.borderRadius : '0',
							padding: item.style && item.style.borderRadius ? '0' : '0 15px',
						}, item.style]">
						<u-image v-if="item.image" :src="item.image" width="70" height="70"></u-image>
						<u-icon v-if="item.icon" :name="item.icon"
							:color="item.style && item.style.color ? item.style.color : '#ffffff'"
							:size="item.iconSize ? $u.addUnit(item.iconSize) : item.style && item.style.fontSize ? $u.getPx(item.style.fontSize) * 1.2 : 17"
							:customStyle="{
								marginRight: item.text ? '2px' : 0
							}"></u-icon>
						<text v-if="item.text" class="u-swipe-action-item__right__button__wrapper__text u-line-1"
							:style="[{
								color: item.style && item.style.color ? item.style.color : '#ffffff',
								fontSize: item.style && item.style.fontSize ? item.style.fontSize : '16px',
								lineHeight: item.style && item.style.fontSize ? item.style.fontSize : '16px',
							}]">{{ item.text }}</text>
					</view>
				</view>
			</slot>
		</view>
		<view class="u-swipe-action-item__content" @touchstart="wxs.touchstart" @touchmove="wxs.touchmove"
			@touchend="wxs.touchend" :status="status" :change:status="wxs.statusChange" :size="size"
			:change:size="wxs.sizeChange">
			<slot />
		</view>
	</view>
</template>
<!-- #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ -->
<script src="./index.wxs" module="wxs" lang="wxs"></script>
<!-- #endif -->
<script>
	/**
	 * SwipeActionItem 滑动单元格子组件
	 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
	 * @tutorial https://www.uviewui.com/components/swipeAction.html
	 * @property {Boolean}			show			控制打开或者关闭（默认 false ）
	 * @property {String | Number}	index			标识符，如果是v-for，可用index索引
	 * @property {Boolean}			disabled		是否禁用（默认 false ）
	 * @property {Boolean}			autoClose		是否自动关闭其他swipe按钮组（默认 true ）
	 * @property {Number}			threshold		滑动距离阈值，只有大于此值，才被认为是要打开菜单（默认 30 ）
	 * @property {Array}			options			右侧按钮内容
	 * @property {String | Number}	duration		动画过渡时间，单位ms（默认 350 ）
	 * @event {Function(index)}	open	组件打开时触发
	 * @event {Function(index)}	close	组件关闭时触发
	 * @example	<u-swipe-action><u-swipe-action-item :options="options1" ></u-swipe-action-item></u-swipe-action>
	 */
	export default {
		name: 'u-swipe-action-item',
		emits: ["click"],
		props: {
			// 控制打开或者关闭
			show: {
				type: Boolean,
				default: false
			},
			// 标识符，如果是v-for，可用index索引值
			name: {
				type: [String, Number],
				default: ''
			},
			// 是否禁用
			disabled: {
				type: Boolean,
				default: false
			},
			// 是否自动关闭其他swipe按钮组
			autoClose: {
				type: Boolean,
				default: true
			},
			// 滑动距离阈值，只有大于此值，才被认为是要打开菜单
			threshold: {
				type: Number,
				default: 30
			},
			// 右侧按钮内容
			options: {
				type: Array,
				default () {
					return []
				}
			},
			// 动画过渡时间，单位ms
			duration: {
				type: [String, Number],
				default: 300
			}
		},
		data() {
			return {
				MIN_DISTANCE: 10,
				// 按钮的尺寸信息
				size: {},
				// 父组件u-swipe-action的参数
				parentData: {
					autoClose: true,
				},
				// 当前状态，open-打开，close-关闭
				status: 'close',
			}
		},
		watch: {
			// 由于wxs无法直接读取外部的值，需要在外部值变化时，重新执行赋值逻辑
			wxsInit(newValue, oldValue) {
				this.queryRect()
			}
		},
		computed: {
			wxsInit() {
				return [this.disabled, this.autoClose, this.threshold, this.options, this.duration]
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			init() {
				// 初始化父组件数据
				this.updateParentData()
				// #ifndef APP-NVUE
				uni.$u.sleep().then(() => {
					this.queryRect()
				})
				// #endif
			},
			updateParentData() {
				// 此方法在mixin中
				this.getParentData('u-swipe-action')
			},
			// #ifndef APP-NVUE
			// 查询节点
			queryRect() {
				this.$uGetRect('.u-swipe-action-item__right__button', true).then(buttons => {
					this.size = {
						buttons,
						show: this.show,
						disabled: this.disabled,
						threshold: this.threshold,
						duration: this.duration
					}
				})
			},
			// #endif
			// 按钮被点击
			buttonClickHandler(item, index) {
				this.$emit('click', {
					index,
					name: this.name
				})
			},
			// #ifdef APP-VUE || MP-WEIXIN || H5 || MP-QQ
			// 关闭时执行
			closeHandler() {
				this.status = 'close'
			},
			setState(status) {
				this.status = status
			},
			closeOther() {
				// 尝试关闭其他打开的单元格
				this.parent && this.parent.closeOther(this)
			},
			getDirection(x, y) {
				if (x > y && x > this.MIN_DISTANCE) {
					return 'horizontal'
				}
				if (y > x && y > this.MIN_DISTANCE) {
					return 'vertical'
				}
				return ''
			},
			getTouchPoint(e) {
				if (!e) {
					return {
						x: 0,
						y: 0
					}
				}
				if (e.touches && e.touches[0]) {
					return {
						x: e.touches[0].pageX,
						y: e.touches[0].pageY
					}
				}
				if (e.changedTouches && e.changedTouches[0]) {
					return {
						x: e.changedTouches[0].pageX,
						y: e.changedTouches[0].pageY
					}
				}
				return {
					x: e.clientX || 0,
					y: e.clientY || 0
				}
			},
			resetTouchStatus() {
				this.direction = ''
				this.deltaX = 0
				this.deltaY = 0
				this.offsetX = 0
				this.offsetY = 0
			},
			touchStart(event) {
				this.resetTouchStatus()
				const touch = this.getTouchPoint(event)
				this.startX = touch.x
				this.startY = touch.y
			},
			touchMove(event) {
				const touch = this.getTouchPoint(event)
				this.deltaX = touch.x - this.startX
				this.deltaY = touch.y - this.startY
				this.offsetX = Math.abs(this.deltaX)
				this.offsetY = Math.abs(this.deltaY)
				this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY)
			},
			// #endif
		},
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/style.components.scss";

	.u-swipe-action-item {
		position: relative;
		overflow: hidden;
		/* #ifndef APP-NVUE || MP-WEIXIN */
		// touch-action: none;
		/* #endif */

		&__content {
			background-color: #FFFFFF;
		}

		&__right {
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			@include vue-flex;

			&__button {
				@include vue-flex;
				justify-content: center;
				overflow: hidden;
				align-items: center;

				&__wrapper {
					@include vue-flex;
					align-items: center;
					justify-content: center;
					padding: 0 15px;

					&__text {
						@include vue-flex;
						align-items: center;
						color: #FFFFFF;
						font-size: 15px;
						text-align: center;
						justify-content: center;
					}
				}
			}
		}
	}
</style>